<template>
	<view>
		<uni-card>
			<template v-slot:title class="">
				<u-cell-group>
					<u-cell :title="budgetInfo.month+budgetInfo.budgetName+'：'+budgetInfo.value">
						<u-icon slot="right-icon" name="edit-pen" color="#2979ff" size="20" @click="openDialog">
						</u-icon>
					</u-cell>
				</u-cell-group>
			</template>
			<uni-section title="关联账单" type="line"></uni-section>
			<billsList :bills-list="budgetBillsList" />
		</uni-card>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入预算" value="" @confirm="updateBudget">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		callCloudFunction
	} from '@/api/requests.js'
	import billsList from '../../components/billsList/billsList.vue'
	export default {
		data() {
			return {
				budgetInfo: {},
				budgetBillsList: [],
				countChange: 0,
			}
		},
		methods: {
			getBudgetAndBillsById(id) {
				callCloudFunction('getBudgets', {
						_id: id
					}, res => {
						this.budgetInfo = res.result.data[0]
						this.countChange = res.result.data[0].count
					},
					err => {
						uni.showModal({
							content: `获取预算失败`,
							showCancel: false
						})
					})
				callCloudFunction('getBills', {
						connectBudget: id
					}, res => {
						this.budgetBillsList = res.result.data
					},
					err => {
						uni.showModal({
							content: `获取预算关联账单失败`,
							showCancel: false
						})
					})
			},
			openDialog() {
				this.$refs.inputDialog.open()
			},
			updateBudget(value) {
				let budget = JSON.parse(JSON.stringify(this.budgetInfo))
				budget.value = parseFloat(parseFloat(value).toFixed(2))
				callCloudFunction('updateBudget', budget, res => {
						uni.showModal({
							content: `预算修改成功`,
							showCancel: false
						})
						this.getBudgetAndBillsById(this.budgetInfo._id)
					},
					err => {
						uni.showModal({
							content: `预算修改失败`,
							showCancel: false
						})
					})
			}
		},
		onLoad: function(option) {
			this.getBudgetAndBillsById(option._id)
		}
	}
</script>

<style>
	.property-title {
		margin: 10px 0 15px 10px;
		font-size: 24px;
	}

	.property-input {
		display: flex;
		flex-direction: row;
		padding: 0 15px;
	}

	.property-input>uni-button {
		height: 35px;
		line-height: 35px;
		margin-left: 5px;
	}
	
	.delete-budget{
		width: 60px;
		height: 60px;
		border-radius: 50%;
		margin: 0 auto;
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 40rpx;
		right: 40rpx;
	}
</style>
